<template>
    <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" v-loading="formLoading">
        <el-form-item label="商品名称" prop="name">
            <el-input v-model="form.name" clearable />
        </el-form-item>
        <el-form-item label="分类" prop="categoryId">
            <el-select v-model="form.categoryId" clearable>
                <el-option v-for="item in categories" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
        </el-form-item>
        <UploadImage label="商品图片" tag="url" v-model="form.url"></UploadImage>
        <el-form-item label="标签" prop="tag">
            <el-input-tag v-model="form.tag" clearable />
        </el-form-item>
        <el-form-item label="描述" prop="description">
            <el-input v-model="form.description" clearable />
        </el-form-item>
        <el-form-item label="价格" prop="price">
            <el-input-number v-model="form.price" :precision="2" :min="0" controls-position="right" clearable>
                <template #prefix>
                    <span>￥</span>
                </template>
            </el-input-number>
        </el-form-item>
        <el-form-item label="规格">
            <el-cascader v-model="form.specifications" :options="specificationList" :props="specificationProps"
                clearable />
        </el-form-item>
        <el-form-item label="默认选中">
            <el-cascader v-model="form.selectedItems" :options="specificationList" :props="specificationProps"
                clearable />
        </el-form-item>
        <el-form-item label="推荐">
            <el-cascader v-model="form.recommendItems" :options="specificationList" :props="specificationProps"
                clearable />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
            <el-input-number v-model="form.sort" :min="0" controls-position="right" clearable />
        </el-form-item>
        <el-form-item label="是否展示" prop="status">
            <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="submit" :loading="loading">确定</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts" name="AddOrEditGoods">
import { ref, reactive, onMounted } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus';
import { goodsCreateOrEdit, goodsGetById } from '@/api/wx/goods';
import type { GoodsType } from '@/api/wx/goods/types';
import { list as categoryList } from '@/api/wx/category';
import { list as amountList } from '@/api/wx/amount';
import type { CategoryType } from '@/api/wx/category/types';
import type { TasteAmountList } from '@/api/wx/amount/types';
import UploadImage from '@/components/UploadImage.vue';

const props = defineProps(['isEdit', 'id'])
const emit = defineEmits(['success'])

const loading = ref(false)
const formLoading = ref(false)
let form = reactive<GoodsType>({ name: '', sort: 0, status: 0 })
const formRef = ref<FormInstance>()
let categories = ref<CategoryType[]>([])

// 校验规则
const rules = reactive<FormRules<GoodsType>>({
    name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
    categoryId: [{ required: true, message: '请选择商品类型', trigger: 'blur' }],
    price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
})

onMounted(() => {
    loadCategory()
    loadAmount()
    if (props.isEdit) {
        loadGoods()
    }
})

const loadCategory = async () => {
    const data = await categoryList({ status: 1 })
    if (data.code === 200) {
        categories.value = data.data
    }
}

const loadGoods = async () => {
    formLoading.value = true
    const data = await goodsGetById(props.id)
    Object.assign(form, data.data)
    formLoading.value = false
}

const submit = async () => {
    await formRef.value?.validate()
    try {
        loading.value = true
        const data = await goodsCreateOrEdit(form)
        if (data.code === 200) {
            ElMessage.success(props.isEdit ? '修改成功' : '添加成功')
            emit('success')
        }
    } finally {
        loading.value = false
    }
}

// ---------- 规格管理 ----------
let specificationList = ref<TasteAmountList[]>([])
const specificationProps = { multiple: true, label: "name", children: "amountList", value: "id" }

const loadAmount = async () => {
    const data = await amountList()
    if (data.code === 200) {
        specificationList.value = data.data
    }
}

</script>

<style scoped lang="scss">
:deep(.el-input-number) {

    .el-input__inner {
        text-align: left;
    }
}

:deep(.el-cascader) {
    width: 100%;
}
</style>